<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <style>
      [id*='error'] {
        border: solid 1px #ddd;
        display: block;
      }
    </style>
    <form action="">
      密码：<input type="text" name="password" value="ccc" style="width: 300px" />
      <span id="password-error"></span>
      <br />
      确认密码：<input type="text" name="confirm_password" />
      <hr />
      <button class="btn">提交</button>
    </form>

    <script>
      //   console.log('s""')
      //   console.log(`''""""''''''`)
      //       console.log(`
      // ab
      // c
      //       `)

      //   console.log(query(`[name='password']`))

      /**
       * 查找元素
       * @param string name 元素选择器
       */
      //   function query(name) {
      //     return document.querySelector(name)
      //   }
      //   let i = 5
      //   //   i = i + 1
      //   //   ++i  =  i++
      //   let f = 2 * i++
      //   console.log(f, i)

      //   let i = 1
      //   query(`[name="password"]`).addEventListener('keyup', function () {
      //     console.log(i)
      //   })
      /**
       * 密码校验
       * @param string password 密码元素
       * @param string confirmPassword 确认密码
       * @param message string 失败时的提示消息
       * @param errorEl string 显示错误消息的元素
       */
      function confirm_password(password, confirmPassword, message, errorEl, eventType) {
        // console.log(1 + 2)
        // let h = password + '-新闻' + message
        // let h = `${password}新闻`
        // console.log(h)
        // console.dir(query(`[name='${password}']`).style.width)
        let elements = document.querySelectorAll(`[name='${password}'],[name='${confirmPassword}']`)

        elements.forEach(function (elem) {
          this.addEventListener(eventType, function () {
            let passwordValue = query(`[name='${password}']`).value
            let confirmPasswordValue = query(`[name='${confirmPassword}']`).value
            //密码比对失败
            if (passwordValue != confirmPasswordValue) {
              query(errorEl).innerHTML = message
            } else {
              query(errorEl).innerHTML = ''
            }
          })
        })
      }
    </script>

    <script src="4.js"></script>

    <script>
      confirm_password(`password`, 'confirm_password', '两次密码不一致', '#password-error', 'keyup')
    </script>
  </body>
</html>
